<template>
	<view class="tab_equally_cn" :class="sticky?'sticky':''" :style="'top:'+offsetTop+'rpx'">
		<view class="flex align-center">
			<view class="flex-one line-height-header text-center" :style="index == active ? item_active_style : item_style"
				v-for="(item,index) in list1" :key="index" @click="click(index)">
				{{item.name}}
			</view>
		</view>
	</view>
</template>

<script>
	import common from '@/components/hzjc/utils/common.js';
	export default {
		props: {
			list: { //数据显示
				type: Array,
				default: []
			},
			listKey: { //当 list 是一个 对象数组 时，通过 list-key 来指定 Object 中 key 的值作为选择器显示内容
				type: String,
				default: ''
			},
			active: { //当前激活标签的索引
				type: [Number, String],
				default: 0
			},
			textSize: { //文字大小，默认单位rpx
				type: [Number, String],
				default: 32
			},
			color: { //底部条颜色
				type: String,
				default: ''
			},
			sticky: { //是否使用粘性定位布局
				type: Boolean,
				default: false
			},
			offsetTop: { //粘性定位布局下与顶部的最小距离，默认单位rpx
				type: [Number, String],
				default: 0
			}
		},
		computed: {
			list1() {
				let array = []
				for (let i = 0; i < this.list.length; i++) {
					let obj = {}
					if (this.listKey) {
						obj.name = this.list[i][this.listKey]
					} else {
						obj.name = this.list[i]
					}
					array.push(obj)
				}
				return array
			},

			item_style() {
				return 'font-size: ' + this.textSize + 'rpx;color: #666;'
			},

			item_active_style() {
				let border_color = this.color ? this.color : common.mainColor()
				return 'border-bottom:2rpx solid ' + border_color + ';font-size: ' + this.textSize +
					'rpx;font-weight: bold;color: #1a1a1a;'
			}
		},

		
		methods: {
			
			//点击标签
			click(index) {
				//更新选中状态
				this.$emit("update:active", index)
				// 回调（当前点击的索引）
				this.$emit('click', {
					index: index
				});
			}
		}
	}
</script>

<style scoped>
	.list__item__border {
		position: absolute;
		bottom: 10rpx;
		left: 0;
		right: 0;
		margin: 0 auto;
	}

	.sticky {
		position: sticky;
		position: -webkit-sticky;
		position: -moz-sticky;
		position: -ms-sticky;
		position: -o-sticky;
		z-index: 998;
	}
</style>
